<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <select id="pro">
        <option value="0">--请选择--</option>

    </select>省
    <select id="city">
        <option>--请选择--</option>
    </select>市
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //页面加载，异步发送获取所有省份的请求
    $.ajax({
        url:'/proServlet',
        type:'get',
        success:function (data) {
            //遍历data
            for(let i=0;i<data.length;i++){
                let id = data[i].id;
                let pname = data[i].pname;
                $("#pro").append("<option value='"+id+"'>"+pname+"</option>")
            }
        }
    })
    $("#pro").change(function () {
        //获取id
        let id = $(this).val();
        //异步发送请求，根据省id获取所有市
        $.ajax({
            url:'/cityServlet?pid='+id,
            type:'get',
            success:function (data) {
                $("#city").html("<option>--请选择--</option>");
                //遍历data
                for(let i=0;i<data.length;i++){
                    let id = data[i].id;
                    let cname = data[i].cname;
                    $("#city").append("<option value='"+id+"'>"+cname+"</option>")
                }
            }
        })
    })
</script>
</html>